import React, {Component} from 'react';
import NavigationBar from '../../Common/NavigationBar/NavigationBar.jsx'
import WeUI from 'react-weui';
import 'whatwg-fetch'
const {
    Cells,
    CellsTitle,
    Cell,
    CellBody,
    CellFooter, Toast, Toptips
} = WeUI;

//import styles
import 'weui';
import 'react-weui/build/dist/react-weui.css';
import {CSS} from '../styles/CreateTeamStyle.css';

export default class TeamListEdit extends Component {
    constructor(props) {
        super(props);
        this.LeftClick = this.LeftClick.bind(this);
        this.CreateTeam = this.CreateTeam.bind(this);
        this.ZoneList = this.ZoneList.bind(this);
        this.state = {
            teamData: [],
            showLoading: true,
            showToptips: false,
            warnTimer:null,
        }
    }

    showWarn() {
        this.setState({showToptips: true, showLoading: false});

        this.state.warnTimer = setTimeout(() => {
            this.setState({showToptips: false});
        }, 2000);
    }

    componentWillMount() {
        fetch(getHost() + "/team", {
            credentials: 'include'
        }).then(response => response.json())
            .then(data => {
                if (data.success) {
                    if (data.data && data.data.length > 0) {
                        let teamData = [];
                        for (let i = 0; i < data.data.length; i++) {
                            let teamName = data.data[i];
                            if (teamName.name.length > 15) {
                                teamName.name = teamName.name.substring(0, 15) + "..."
                            }
                            teamData.push(teamName);
                        }
                        console.log(teamData);
                        this.setState({teamData: teamData, showLoading: false, showToptips: false});
                    } else {
                        markDataRequestFlag();
                        location.hash = "/CreateTeam";
                        return;
                    }
                } else {
                    this.showWarn();
                }
            }).catch(e => {
            this.showWarn();
        });
    }

    componentDidMount() {
    }

    LeftClick() {
        location.hash = "/UserCenter";
    }

    CreateTeam() {
        location.hash = "/CreateTeam?from=edit";
    }

    ZoneList(id) {
        //团队详情
        location.hash = "/TeamInfoEdit?teamId=" + id;
    }

    render() {
        let teamNameHtml = null;
        if (this.state.teamData.length > 0) {//有团队
            teamNameHtml = <div style={{marginTop: "0.9rem"}}>
                <cells>
                    {this.state.teamData.map((tempData, index) =>
                        <Cell key={"t" + index} style={{background: "#FFFFFF"}}
                              onClick={this.ZoneList.bind(this, tempData.id)} access>
                            <CellBody >{tempData.name}</CellBody>
                            <CellFooter/>
                        </Cell>
                    )}
                </cells>
            </div>
        }
        return (
            <div>
                <NavigationBar Title="选择企业" LeftBar="true" LeftTitle="返回"
                               LeftIconSrc="/iot-meeting/assets/images/common/nav_back_icon.png" LeftClick={this.LeftClick}/>
                <CellsTitle id="TeamListTitle">企业列表</CellsTitle>
                {teamNameHtml}
                <Cells>
                    <Cell style={{height: "2.7rem"}} onClick={this.CreateTeam} access>
                        <CellBody id="CreateTeamAccess">创建企业</CellBody>
                        <CellFooter/>
                    </Cell>
                </Cells>
                <Toptips type="warn" show={this.state.showToptips}>
                    网络出了点问题，请重试！
                </Toptips>
                <Toast icon="loading" show={this.state.showLoading}>加载中...</Toast>
            </div>
        )
    }
}